import { Button, Text } from "@react-navigation/elements";
import { RouteProp, useNavigation } from "@react-navigation/native";
import { View } from "react-native";
import { StackNavigationProp, StackRouteList } from "../types/routes";
import React from "react";

export default function OrderPage({ route }: { route: RouteProp<StackRouteList, '/orders'> }) {
  const navigation = useNavigation<StackNavigationProp>();
  const { orderId } = route.params;

  return <View>
    <Text>OrderId: {orderId}</Text>
    <Text>Sub-orders:</Text>
    {orderId
      ? (<React.Fragment>
        <Button onPress={() => navigation.push('/orders', {
          orderId: orderId * 2
        })}>To order {`${orderId * 2}`}</Button>
        <Button onPress={() => navigation.push('/orders', {
          orderId: orderId * 3
        })}>To order {`${orderId * 3}`}</Button>
      </React.Fragment>)
      : <Text>No order id</Text>}

  </View>;
}
